<template>
  <div class="industrial-park">
    <div class="industrial-park__table">
      <table>
        <tr>
          <td>
            <div class="content">
              <div class="title">
                <span>产业园个数</span>
                <span></span>
              </div>
              <div>
                <span class="num">{{milliFormat(yqAll.cyygs)}}</span>
                <span class="units">个</span>
              </div>
            </div>
          </td>
          <td>
            <div class="content">
              <div class="title">
                <span>总占地面积</span>
                <span></span>
              </div>
              <div>
                <span class="num">{{milliFormat(yqAll.zzdmj)}}</span>
                <span class="units">万平方米</span>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="content">
              <div class="title">
                <span>入驻企业总数</span>
                <span></span>
              </div>
              <div>
                <span class="num">{{milliFormat(yqAll.rzqyzs)}}</span>
                <span class="units">个</span>
              </div>
            </div>
          </td>
          <td>
            <div class="content">
              <div class="title">
                <span>新增入驻企业数量</span>
                <span>（上月）</span>
              </div>
              <div>
                <span class="num">{{milliFormat(yqAll.xzrzyqsl)}}</span>
                <span class="units">个</span>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="content">
              <div class="title">
                <span>入驻企业总人数</span>
                <span></span>
              </div>
              <div>
                <span class="num">{{milliFormat(yqAll.rzqyzrs)}}</span>
                <span class="units">人</span>
              </div>
            </div>
          </td>
          <td>
            <div class="content">
              <div class="title">
                <span>入驻企业融资总额</span>
                <span>（2019年）</span>
              </div>
              <div>
                <span class="num">{{milliFormat(yqAll.rzqyrzzed)}}</span>
                <span class="units">万元</span>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="content">
              <div class="title">
                <span>入驻企业年产值</span>
                <span>（2019年）</span>
              </div>
              <div>
                <span class="num">{{milliFormat(yqAll.rzqyncz)}}</span>
                <span class="units">万元</span>
              </div>
            </div>
          </td>
          <td>
            <div class="content">
              <div class="title">
                <span>入住企业月产值</span>
                <span>(上月)</span>
              </div>
              <div>
                <span class="num">{{milliFormat(yqAll.rzqyycz)}}</span>
                <span class="units">万元</span>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="content">
              <div class="title">
                <span>入驻企业年纳税金额</span>
                <span>（2019年）</span>
              </div>
              <div>
                <span class="num">{{milliFormat(yqAll.rzqynnse)}}</span>
                <span class="units">万元</span>
              </div>
            </div>
          </td>
          <td>
            <div class="content">
              <div class="title">
                <span>入驻企业月纳税金额</span>
                <span>(上月)</span>
              </div>
              <div>
                <span class="num">{{milliFormat(yqAll.rzqynsje)}}</span>
                <span class="units">万元</span>
              </div>
            </div>
          </td>
        </tr>
      </table>
    </div>
    <div class="industrial-park__content">
      <div class="industrial-park__select">
        <div class="industrial-park__select-city">
          <el-select v-model="city" size="mini" @change="getData">
            <el-option
              v-for="(item, i) in cityList"
              :key="i"
              :label="item"
              :value="item"
              >
            </el-option>
          </el-select>
        </div>
        <div class="industrial-park__select-date">
          <el-date-picker
            v-model="dayTime"
            type="month"
            :clearable="false"
            size="mini"
            value-format="yyyy-MM"
            format="yyyy年M月"
            @change="getData">
          </el-date-picker>
        </div>
        <el-checkbox v-model="checked" @change="getData">昨日</el-checkbox>
      </div>
      <ve-histogram :data="chartData" :settings="chartSettings" :extend="chartExtend" width="95%" height="15rem" :colors="colors"></ve-histogram>
    </div>
  </div>
</template>
<script>
import { Select, Option, Checkbox, DatePicker } from 'element-ui'
import Histogram from 'v-charts/lib/histogram.common'
import { milliFormat, formatDate, getDay, formatFontSize } from 'js/utils'
import { getCyy } from 'src/api/api'
import storage from 'good-storage'
export default {
  components: {
    [Select.name]: Select,
    [Option.name]: Option,
    [Checkbox.name]: Checkbox,
    [Histogram.name]: Histogram,
    [DatePicker.name]: DatePicker,
  },
  data(){
    this.colors = ['#981DD9']
    return {
      // height: document.body.clientWidth * 0.05/192 + 'rem',
      checked: false,
      dayTime: formatDate('yyyy-mm', new Date()),
      cityList: storage.get('cityList'),
      city: '晋中',
      yqAll: {},
      chartData: {
        columns: ['name', 'value'],
        rows: []
      },
      chartSettings: {
        // labelMap: {
        //   'cljc': '人员进出',
        //   'cljc': '车辆进出',
        //   'stjcrs': '食堂就餐人数',
        // },
      },
      chartExtend: {
        title: {
          text: '产业园进出汇总图',
          textStyle: {
            color: '#fff',
            fontSize: formatFontSize(0.11),
          },
          right: 0,
          top: 5
        },
        tooltip: {
          show: false,
        },
        legend: {
          show: false,
        },
        xAxis: {
          axisLabel: {
            color: '#fff',
            fontSize: formatFontSize(0.1)
          },
        },
        yAxis: {
          axisLabel: {
            color: '#fff',
            fontSize: formatFontSize(0.08),
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#fff',
              opacity: 0.1,
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#fff',
              opacity: 0.1,
            }
          },
          // max: 1000,
          splitNumber: 10,
        },
        grid: {  
          left: '0',  
          right: '0',
          top: '20%',
          bottom: '2%',  
        },
        series: {
          barWidth: formatFontSize(0.35),
          label: { 
            show: true, 
            position: 'top',
            color: '#fff',
            fontSize: formatFontSize(0.1),
          },
        }
      },
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    milliFormat(num) {
      return milliFormat(num)
    },
    getData() {
      let params = {}
      if(this.checked) {
        params = {
         dayTime: getDay('-1', '-'),
         city: this.city
        }
      } else {
        params = {
          dayTime: this.dayTime,
          city: this.city
        }
      }
      getCyy(params).then( res => {
        this.yqAll = res.data.yqAll
        this.chartData.rows = [
          {'name': '人员进出', 'value': res.data.yqAll.jcrs},
          {'name': '车辆进出', 'value': res.data.yqAll.cljc},
          {'name': '食堂就餐人数', 'value': res.data.yqAll.stjcrs}
        ]
      })
    }
  }
}
</script>
<style lang="scss">
.industrial-park {
  display: flex;
  justify-content: space-between;
  &__content {
    width: 50%;
  }
  &__select {
    text-align: right;
    padding: 5px 15px 5px 0;
    font-size: 14px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #AAECFF;
    .el-select, .el-date-editor {
      .el-input__inner{
        // width: 150px;
        border: 0;
        border-radius: 0;
        background:rgba(11,21,58,1);
        box-shadow:1px 1px 0px 0px rgba(255,255,255,0.25), 0px 2px 4px 0px rgba(0, 0, 0, 1);
        color: #AAECFF;
        font-size: 14px;
      }
      .el-input__icon {
        color: #AAECFF;
        font-size: 14px;
      }
    }
    &-city {
      margin-right: 20px;
      .el-select {
        width: 100px;
      }
    }
    &-date {
      margin-right: 20px;
      .el-date-editor {
        width: 135px;
      }
    }
    .el-checkbox {
      color: #AAECFF;
    }
    .el-checkbox__input.is-checked+.el-checkbox__label {
      color: #AAECFF;
    }
    .el-checkbox__inner {
      border-radius: 50%;
    }
  }
  &__table {
    width: 50%;
    padding: 10px 10px 5px 20px;
    table {
      tr {
        td, th {
          border: 1px solid #1C639B;
          color:#7CA1D2;
          // padding: 5px 20px;
          font-size: 11px;
          width: 145px;
          // height: 50px;
        }
      }
    }
    .content {
      height: 50px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
    }
    .title {
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
      line-height: 15px;
    }
    .num {
      font-size: 16px;
      font-family: FZZhunYuan-M02S;
      font-weight: 600;
      color: #45F0EA;
      line-height: 20px;
    }
    .units {
      color: #fff;
      font-size: 8px;
    }
  }
}
</style>